<template>
  <div class="detail">
    <section class="detail-title">
      <div class="detail-title-left">
        <img src="/src/icons/title.png" alt style="vertical-align:middle;width:40px;height:40px;">
        <span style="font-size:18px;">学生会长</span>
      </div>
      <div class="detail-title-right">
        <el-button type="primary">个人主页</el-button>
      </div>
    </section>
    <div class="detail-header">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col>
          <div class="header-list" style="background-color:#4e9fec">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="dengluyonghu"/>
              </section>
              <section class="content">
                <p class="subtitle">在学课程</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="header-list" style="background-color:#8995ea">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="xinzengzhuce"/>
              </section>
              <section class="content">
                <p class="subtitle">在学计划</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="header-list" style="background-color:#15b8e7">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="kechengxinzeng"/>
              </section>
              <section class="content">
                <p class="subtitle">任务完成比</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="header-list" style="background-color:#6bc57c">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="xinzengxueyuan"/>
              </section>
              <section class="content">
                <p class="subtitle">笔记数</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="header-list" style="background-color:#1ad0d2">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="xinzenghuiyuan"/>
              </section>
              <section class="content">
                <p class="subtitle">参与话题</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="header-list" style="background-color:#e9b21c">
            <div>
              <section class="titleimg">
                <svg-icon class-name="icon" icon-class="weihuifu"/>
              </section>
              <section class="content">
                <p class="subtitle">评价数</p>
                <p style="margin:0;color:#fff">
                  <span>268</span>
                </p>
              </section>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="detail-liveness">
      <div class="detail-liveness-title">活跃度</div>
      <div class="detail-liveness-search">
        <el-radio-group v-model="radio">
          <el-radio :label="1" border>7天</el-radio>
          <el-radio :label="2" border>30天</el-radio>
          <el-radio :label="3" border>90天</el-radio>
        </el-radio-group>
        <el-date-picker
          :picker-options="picker"
          v-model="value"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="|"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <detail-line id="line" :style="line" class="line"/>
    </div>
    <div class="detail-learn">
      <div class="detail-learn-title">学习详情</div>
      <ul class="detail-learn-subject">
        <li class="detail-learn-subject-list">
          <el-row :gutter="20">
            <el-col :span="5">
              <img src="/src/assets/user_images/language.png" alt style="width:100%;height:100%;">
            </el-col>
            <el-col :span="13">
              <h4>高三语文作文重点突击</h4>
              <p style="color:#c6c6c7">不同的学生可以根据自己的个人体验，选择熟悉的素材，表达真情实感，彰显自我个性。</p>
              <span class="price">599.00元</span>
            </el-col>
            <el-col :span="6">
              <div class="addTime">
                <span>加入时间</span>
                <span class="content" style="margin-left:15px;">2019-3-25 10:22:18</span>
              </div>
              <div class="study">
                <span style="margin-top:45px;float:left;">学习进度</span>
                <el-progress
                  :text-inside="true"
                  :stroke-width="18"
                  :percentage="70"
                  style="float:left;margin-left:15px;width:50%;position:absolute;bottom:0;left:70px;"
                />
              </div>
            </el-col>
          </el-row>
        </li>
        <li class="detail-learn-subject-list">
          <el-row :gutter="20">
            <el-col :span="5">
              <img src="/src/assets/user_images/language.png" alt style="width:100%;height:100%;">
            </el-col>
            <el-col :span="13">
              <h4>高三语文作文重点突击</h4>
              <p style="color:#c6c6c7">不同的学生可以根据自己的个人体验，选择熟悉的素材，表达真情实感，彰显自我个性。</p>
              <span class="price">599.00元</span>
            </el-col>
            <el-col :span="6">
              <div class="addTime">
                <span>加入时间</span>
                <span class="content" style="margin-left:15px;">2019-3-25 10:22:18</span>
              </div>
              <div class="study">
                <span style="margin-top:45px;float:left;">学习进度</span>
                <el-progress
                  :text-inside="true"
                  :stroke-width="18"
                  :percentage="70"
                  style="float:left;margin-left:15px;width:50%;position:absolute;bottom:0;left:70px;"
                />
              </div>
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import DetailLine from './components/detail/line'
export default {
  components: {
    DetailLine
  },
  data() {
    return {
      line: {
        width: '100%',
        height: '510px'
      },
      radio: 1,
      value: '',
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  }
}
</script>

<style lang="scss">
.detail {
  padding: 0 20px;
  .detail-title {
    width: 100%;
    height: 70px;
    line-height: 70px;
    &-left {
      float: left;
      height: 70px;
    }
    &-right {
      float: right;
    }
  }
  .header-list {
    width: 100%;
    height: 127px;
    border-radius: 5px;
    div {
      height: 127px;
      width: 100%;
      border-radius: 5px;
      .titleimg {
        border-radius: 50%;
        float: left;
        margin-top: 25px;
        text-align: center;
        background-color: rgba(11, 46, 85, 0.08);
        @media screen and (max-width: 1580px) {
          margin-left: 4.8%;
          width: 50px;
          line-height: 60px;
          height: 50px;
          .icon {
            width: 28px;
            height: 28px;
          }
        }
        @media screen and (min-width: 1581px) {
          margin-left: 6.8%;
          width: 70px;
          height: 70px;
          line-height: 95px;
          .icon {
            width: 38px;
            height: 38px;
          }
        }
      }
      .content {
        float: left;
        margin-top: 25px;
        @media screen and (max-width: 1580px) {
          margin-left: 10.8%;
          width: 80px;
          height: 50px;
          span {
            font-size: 18px;
          }
          .subtitle {
            margin-top: 0;
            color: #fff;
            margin-bottom: 5px;
          }
        }
        @media screen and (min-width: 1581px) {
          margin-left: 11.6%;
          width: 96px;
          span {
            font-size: 30px;
          }
          .subtitle {
            margin-top: 0;
            color: #fff;
            margin-bottom: 20px;
          }
        }
      }
    }
    @media screen and (max-width: 1580px) {
      height: 100px;
      div {
        height: 100px;
      }
    }
  }
  .detail-liveness {
    padding: 30px 0 0 0;
    &-title {
      height: 45px;
      line-height: 45px;
      width: 100%;
      padding: 0 10px;
      margin-bottom: 14px;
      background-color: #ebf4ff;
    }
    &-search {
      .el-radio-group {
        vertical-align: baseline;
      }
    }
  }
  .detail-learn {
    &-title {
      height: 45px;
      line-height: 45px;
      width: 100%;
      padding: 0 10px;
      margin-bottom: 14px;
      background-color: #e4fafd;
      margin-bottom: 20px;
    }
    &-subject {
      padding: 0 25px;
      margin: 0;
      width: 100%;
      list-style: none;
      &-list {
        height: 180px;
        padding: 14px 14px 28px 14px;
        border: 1px solid #dcdfe6;
        border-radius: 3px;
        margin-bottom:20px;
        .el-col {
          height: 150px;
          position: relative;
          span.price {
            position: absolute;
            bottom: 22px;
            color: #ea1d1d;
            font-size: 18px;
          }
          .addTime {
            position: absolute;
            top: 51px;
          }
          .study {
            position: absolute;
            bottom: 19px;
            width: 100%;
          }
          span.content {
            font-size: 18px;
          }
        }
        h4 {
          margin: 0;
          margin-top: 16px;
          color: #3d3d3d;
        }
        p {
          margin: 0;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
